<template>
    <el-dialog :title="title" center :visible.sync="dialogVisible" width="500px" :before-close="handleClose">
        <!-- 注意：“status-icon”属性的作用是“为输入框添加表示校验结果的反馈图标”↓ -->
        <el-form :rules="rules" ref="formData" :model="formData" label-width="100px" label-position="right" style="width:400px" status-icon>
            <el-form-item label="用户名：" prop="username">
                <el-input v-model="formData.username" maxlength="30"></el-input>
            </el-form-item>
            <el-form-item label="昵称：" prop="nickName">
                <el-input v-model="formData.nickName" maxlength="50"></el-input>
            </el-form-item>
            <el-form-item label="手机号：" prop="mobile">
                <el-input v-model="formData.mobile" maxlength="11"></el-input>
            </el-form-item>
            <el-form-item label="邮箱：" prop="email">
                <el-input v-model="formData.email" maxlength="30"></el-input>
            </el-form-item>
            <el-form-item label="账户过期：" prop="isAccountNonExpired">
                <!-- 1：正常；0：过期 -->
                <el-radio-group v-model="formData.isAccountNonExpired" style="margin-left:55px">
                    <!-- 设置border属性可以渲染为带有边框的单选框↓ -->
                    <el-radio :label="1" border>正常</el-radio>
                    <el-radio :label="0" border>过期</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="密码过期：" prop="isCredentialsNonExpired">
                <!-- 1：正常；0：过期 -->
                <el-radio-group v-model="formData.isCredentialsNonExpired" style="margin-left:55px">
                    <el-radio :label="1" border>正常</el-radio>
                    <el-radio :label="0" border>过期</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="账户锁定：" prop="isAccountNonLocked">
                <!-- 1：正常；0：锁定 -->
                <el-radio-group v-model="formData.isAccountNonLocked" style="margin-left:55px">
                    <el-radio :label="1" border>正常</el-radio>
                    <el-radio :label="0" border>锁定</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer" style="margin-left: 0px;">
            <el-button type="primary" @click="submitForm('formData')" size="mini">确 定</el-button>
            <el-button @click="handleClose" size="mini">取 消</el-button>
        </span>
    </el-dialog>
</template>
<script>
import * as api from '@/api/user' // ←导入所有被导出的方法，其中星号代表所有被导出的方法。采用该方式导入的方法后面需使用时，直接采用“别名.方法名()”的方式即可
export default {
    props:{
        title:{ // ←左边这项表示“弹出的对话框的标题”
            type:String,
            default:'',
        },
        dialogVisible:{ // ←左边这项被用来控制是否弹出对话框。取值为“true”时弹出对话框。
            type:Boolean,
            default:false,
        },
        formData:{ // ←左边这项表示“提交的表单数据”
            type:Object,
            default:{}
        },
        remoteClose:Function // ←左边这项被用来关闭对话框
    },
    data() {
        return {
            // 表单的校验规则
            rules:{
                username:[
                    {required:true,message:'请输入用户名',trigger:'blur'},
                    {min:6,max:30,message:'长度在6到30个字符之间',trigger:'blur'}
                ],
                nickName:[{required:true,message:'请输入昵称',trigger:'blur'}],
                mobile:[{required:true,message:'请输入手机号',trigger:'blur'}],
                isAccountNonExpired:[{required:true,message:'请选择',trigger:'change'}],
                isCredentialsNonExpired:[{required:true,message:'请选择',trigger:'change'}],
                isAccountNonLocked:[{required:true,message:'请选择',trigger:'change'}],
            }
        }
    },
    methods: {
        // 1.“handleClose”表示“关闭对话框”；2.“done”虽然是一个被传入的对象，但在此处既可以接收也可以不接收（因为该参数在此处没什么用）↓
        handleClose(done){
            this.$refs['formData'].resetFields()
            // “this.dialogVisible = false” ←左边这种写法是错误的，因为“dialogVisible”在这个组件中是使用“props”选项接收的从其父组件中被传递过来的属性，所以在作为子组件的这个组件中不能直接修改其值。
            this.remoteClose() // ←左边这项表示通过触发名为“remoteClose”的事件函数来关闭对话框
        },
        // 提交表单数据
        submitForm(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.submitData()
                } else {
                    this.$message({
                        message:'提交表单失败（表单验证未通过）',
                        type:'error',
                        center:true
                    })
                    console.log('提交表单失败（表单验证未通过）');
                    return false;
                }
            });
        },
        async submitData(){ // ←注意：左边这项是“ES6”中的新语法，当加上“async”和“await”时，该方法返回当前响应的数据。
            let response = null
            if (this.formData.id) {
                // 编辑用户
                response = await api.update(this.formData)
            } else {
                // 新增用户，其初始密码与用户名一致
                this.formData.password = this.formData.username
                response = await api.add(this.formData)
            }
            if (response.code === 20000) {
                this.$message({
                        message:'提交表单成功',
                        type:'success',
                        center:true
                    })
                    // 关闭对话框
                    this.handleClose()
            } else {
                    this.$message({
                        message:'提交表单失败（网络原因）',
                        type:'error',
                        center:true
                    })
                    console.log('提交表单失败（网络原因）');
                    return false;
                }
        }
    },
}
</script>
<style lang="scss" scoped>
    div{::v-deep.el-form-item__error{white-space: pre;top: 28px;left: 82.5px;}}
</style>